<template>
  <div class="part-box" >
    <div class="box-title">{{ title }}</div>
    <div class="box-wrap">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default{
    props:{
      height:{
        require:true,
        default:0
      },
      title:{
        require:true,
        default:''
      }
    }
  }
</script>    


<style lang="scss" scoped >
.part-box{
  width: 100%;
  border: 1px solid;
  border-style: solid;
  border-width: 1px;
  border-image: linear-gradient(to right bottom,rgba(0, 106, 129,0.2), rgba(0, 106, 129,1), rgba(0, 106, 129,0.2)) ;
  border-image-slice: 1;
  .box-title{
    height: 42px;
    text-align: center;
    line-height: 42px;
    background-image: linear-gradient(to right,rgba(0, 105, 131,0.2),rgba(0, 105, 131,0.9),rgba(0, 105, 131,0.2));
    font-size: 18px;
    color: #fff;
  }
  .box-wrap{
    width: 100%;
    height: calc(100% - 42px);
  }
}
</style>